<template>
    <section class="watchSection">
        <layout :isVertical="true">
            <common-toolbar text="设备故障工单创建">
                <!-- <el-button class="btn commonButton" type="default" @click="dialogVisible=true">筛选</el-button>
                <el-button class="btn commonButton" v-if="!onlyShowError" type="default" @click="searchErrorList">仅查看异常数据</el-button>
                <el-button class="btn commonButton" v-if="onlyShowError" type="default"  @click="searchAllList">查看全部数据</el-button> -->
            </common-toolbar>
            <layout layout="center"  class="centerSection noScrollSection">
            <p class="p">请填写以下信息，生成故障工单：</p>
            <el-divider></el-divider>
            <el-form ref="ruleForm" :model="worko" label-width="140px" :rules="rules">
            <el-form-item label="故障影院" prop="cinemaName">
                <el-select v-model="worko.cinemaName" placeholder="请选择故障影院" @change="changeCinemaName">
                        <el-option
                        v-for="item in user3"
                        :key="item.cinemaCode"
                        :label="item.cinemaNameCn"
                        :value="item.cinemaCode">
                        </el-option>
                    </el-select>
            </el-form-item>
            <div class="leftData" style="display: inline-flex;width: 100%;">

                <el-form-item label="联系人" prop="linkman">
                    <el-input v-model="worko.linkman"  placeholder="请输入联系人" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="worko.phone"  placeholder="请输入联系方式"></el-input>
                </el-form-item>
               
            </div>
             <div class="leftData" style="display: inline-flex;width: 100%;">
            <el-form-item label="故障影厅" prop="hallId">
                <el-select v-model="worko.hallId" placeholder="请选择故障影厅" @change="changeSelect">
                         <el-option
                    v-for="item in user2"
                    :key="item.id"
                    :label="item.tmsHallName"
                    :value="getValue(item)">
                    </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="故障设备" prop="deviceId">
                <el-select v-model="worko.deviceId" placeholder="请选择故障设备" @change="changeSelectdDevice">
                       <el-option
                    v-for="item in user1"
                    :key="item.deviceId"
                    :label="getLabel(item)"
                    :value="item.deviceId">
                    </el-option>
                    </el-select>
            </el-form-item>
             </div>
            <el-form-item label="故障详情" prop="faultDetails" style="margin-top:10px;">
                <el-input v-model="worko.faultDetails" placeholder="请输入故障详情" type="textarea" maxlength="200"  show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="创建人">
                <div>{{getName(worko)}}</div>
            </el-form-item>
             <el-form-item style="margin-top:22px;text-align: center;">
                <el-button type="primary" @click="workOrderSave('ruleForm')">创建</el-button>
            </el-form-item>
</el-form>
           
            </layout>
        </layout>
        <el-dialog
                title="筛选"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="影院名称">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker
                                v-model="form.date"
                                type="daterange"
                                range-separator="至"
                                size="small"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Service from './showStatusWatch.service';
import {JSEncrypt} from 'jsencrypt';
import base from '@/scrollLoad';
import moment from 'moment';
import {
  checkMail,
  checkPhone,
} from "@/utils/validate";


@Component
export default class cinemaShowLog extends Vue{
    height = 500;
    windowHeight = 700;
    loading = false;
    data = [];
    onlyShowError = false;
    total = 0;
    page = 1;
    pageSize = 30;
    cinemaName = '';
    cinemaCode = '';

    dialogVisible = false;
    form = {
        name: '',
        code: '',
        date : ''
    };
    options=[];
    worko={}
    input:null;
    user3=[];
    user2=[];
    user1=[];
    hallName={};
    deviceName={};
    cinemaNameData={};
    tmsHallName=null;
    hallId=null;
    workoRderCreatDetails = {};
    rules={
          cinemaName: [
            { required: true, message: '请选择故障影院', trigger: 'change' }
          ],
          hallId: [
            { required: true, message: '请选择故障影厅', trigger: 'change' }
          ],
          linkman: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
          phone: [
            {required: true, message: '请输入有效的联系方式', trigger: 'blur' },
             { validator: checkPhone, trigger: "blur" },
          ],
          deviceId:[{
          required: true,
          message: '请选择故障设备',
          trigger: 'change',
        }],
          faultDetails: [
            { required: true, message: '请输入故障详情', trigger: 'blur' }
          ],
          adminPassword: [
            { required: true, message: '请输入管理员密码', trigger: 'blur' }
          ]
      };
    constructor(){
        super();

    };
    getLabel(label) {
        if(label.deviceId == -1) {
            return label.deviceTypeName
        } else {
            return label.deviceTypeName +'/'+ label.deviceCatName
        }
    }
     // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    }
    searchErrorList(){
        this.page = 1;
        this.onlyShowError = true;
        this.searchList();
    }

    searchAllList(){
        this.onlyShowError = false;
        this.searchList();
    }
    changeCinemaName(vaule) {
        this.user3.forEach((val)=>{
        //console.log(val)
        if(val.cinemaCode==vaule){
            this.cinemaNameData=val;
        }
        })
        console.log(this.worko.hallId)
        if(this.worko.hallId!=undefined) {
            this.worko.hallId = undefined
            this.worko.deviceId = ''
        }
        this.getList()
    }
    createSave() {
        this.worko = {
            linkman:'',
            phone:'',
            hallId:'',
            deviceId:'',
            faultDetails:'',
        }
    }
    getValue(item) {
        //console.log(this.worko.hallId,item)
        if(this.worko.hallId==undefined ||this.worko.hallId == item.tmsHallName) {
            this.tmsHallName = item.tmsHallName;
            
             this.hallId= item.id;
             return item.tmsHallName
        }
        // `${item.id}|${item.tmsHallName}`
        return item.tmsHallName
    }
    // changeSelect(vaule) {
    //     this.user2.forEach((val)=>{
    //     //console.log(val,this.hallId)
    //     if(val.id==this.hallId){
    //         this.hallName=val;
    //         //console.log(this.worko.deviceId,'***************')
    //         if(this.worko.deviceId!=undefined) {
    //             this.worko.deviceId = ''
    //             this.user1 =[]
    //         }
    //     }
    //     })
    //     this.deviceGetList()
    // }
     changeSelect(vaule) {
        //console.log(vaule)
        // var [subjectId,name] = vaule.split('|');
        this.worko.hallId = vaule;
        let hallId = null
        // this.hallId = subjectId;
        this.user2.forEach((val)=>{
        //console.log(val,vaule)
        if(val.id==this.hallId){
            this.hallName=val;
        }
        if(val.tmsHallName==vaule){
           return hallId=val.id;
        }
        })
        //console.log(hallId)
        this.user1=[]
        Service.deviceGetList(hallId).then(res=>{
            if(res.data.succeeded){
                 if(this.worko.deviceId!=undefined) {
                    this.worko.deviceId = ''
                    this.user1 =[]
                }
                this.user1 = res.data.data
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    }
     changeSelectdDevice(vaule) {
        this.user1.forEach((val)=>{
        //console.log(val,vaule)
        if(val.deviceId==vaule){
            this.deviceName=val;
        }
        
        });
    }
    byHeadquartersCode() {
        Service.byHeadquartersCode(true).then(res=>{
            if(res.data.succeeded) {
                this.user3 = res.data.data;
            } else {
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    }
    getList() {
        Service.hallGetList(this.worko.cinemaName).then(res=>{
            if(res.data.succeeded){
                this.user2 = res.data.data
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    }
    deviceGetList() {
        Service.deviceGetList(this.hallId).then(res=>{
            if(res.data.succeeded){
                this.user1 = res.data.data
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    }
     back(): void {
        this.$router.go(-1);
    }
    getName(row) {
         let userInfoForm = JSON.parse(window.sessionStorage.getItem('userInfoForm'))
        if(userInfoForm.fullName=='') {
            return userInfoForm.userName
        } else {
            return userInfoForm.fullName
        }
    } 
    workOrderSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             let userInfoForm = JSON.parse(window.sessionStorage.getItem('userInfoForm'))
            //console.log(this.cinemaNameData)
            this.$set(this.worko,'hallName',this.tmsHallName)
            this.$set(this.worko,'deviceName',this.deviceName.deviceTypeName+this.deviceName.deviceCatName)
            this.$set(this.worko,'cinemaName',this.cinemaNameData.cinemaNameCn)
            this.$set(this.worko,'createUserName',userInfoForm.fullName==''?userInfoForm.userName:userInfoForm.fullName)
            this.$set(this.worko,'createUserId',userInfoForm.userId)
            this.$set(this.worko,'hallId',this.hallId)
            this.$set(this.worko,'deviceId',this.worko.deviceId)
            this.$set(this.worko,'cinemaCode',this.cinemaNameData.cinemaCode)

            Service.workOrderSave(this.worko).then(res=>{
                if(res.data.succeeded) {
                    this['$message']({
                        message: '保存成功',
                        type: 'success'
                    });
                   this.$router.push({
                path:'/watch/workoRderCreatDetails',
                name:'工单列表',
            })
                } else {
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
    
    }
    searchList(){
        // let params = {
        //     page: this.page,
        //     pageSize: this.pageSize,
        //     status: 0,
        //     cinemaName: this.cinemaName,
        //     cinemaCode: this.cinemaCode,
        // }
        // //console.log(params)

        // this.data = [];
        // let list = [];
        // for(let i=0;i<30;i++){
        //     list.push({
        //         id: i,
        //         name : '影厅名称' + i,
        //         cinemaName : (i+1)+'号厅' ,
        //         movie: 'ShengXiaWeiLai-2D_185_JP_115M_PTH_51_0721',
        //         totalTime: '02:00:54',
        //         playDate: '2021-11-18',
        //         playTime: '08:00~10:00',
        //     });
        // }

        // this.data = list;

        // this.total = this.data.length;
    }

    handleSizeChange(val) {
        this.pageSize = val;
        this.searchList();
    }

    handleCurrentChange(val) {
        this.page = val;
        this.searchList();
    }

    showDetail(){

    }

    dateFormat(date){
        return moment(date).format("YYYY-MM-DD,H:m:s");
    }

    resizeEvent(){
        this.windowHeight = document.documentElement.clientHeight;
        this.height = this.windowHeight - 210;
    }

    created(){
        const me = this;
        this.resizeEvent();
        this.searchList();
        this.byHeadquartersCode()
        let workoRderCreatDetails = JSON.parse(window.localStorage.getItem('workoRderCreatDetails'))
        this.workoRderCreatDetails = workoRderCreatDetails
        let userInfoForm = JSON.parse(window.sessionStorage.getItem('userInfoForm'))
        // this.$set(this.worko,'username',userInfoForm)
        window.onresize = () => {
            return (() => {
                me.resizeEvent();
            })()
        };
    };
    mounted(){

    };

}
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';
.el-row {
    line-height: 40px;
    margin: 10px;
}
.bg-purple {
    text-align: center;
}
.el-select {
    width: 100%;
}
.p {
    font-family: SourceHanSansSC;
    font-weight: 700;
    font-size: 18px;
    color: rgba(25, 39, 48, 0.57);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 26px;
    text-decoration: none;
    margin-left: 92px;
}
.el-col-12 {
    text-align: center;
}
/deep/ .el-divider--horizontal{
    margin: 10px 0;
}
.leftData {
    width: 100%;
    /deep/
    .el-form-item {
        width: 50%;
    }
}
 /deep/
    .el-form-item {
        margin-bottom: 10px !important;
    }
</style>